<!doctype html>




<html class="theme-next pisces" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
    
  
  <link href="//cdn.staticfile.org/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  
    
      
    

    
  

  

  
    
      
    

    
  

  
    
      
    

    
  

  
    
    
    <link href="//fonts.lug.ustc.edu.cn/css?family=Monda:300,300italic,400,400italic,700,700italic|Roboto Slab:300,300italic,400,400italic,700,700italic|Lobster Two:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






  

<link href="//cdn.staticfile.org/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Web,JavaScript," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />






<meta name="description" content="样式定义样式的方式有3 种：通过&amp;lt;link/&amp;gt;元素包含外部样式表文件、[外联]使用&amp;lt;style/&amp;gt;元素定义嵌入式样式，[内联]以及使用style 特性定义针对特定元素的样式。[行内]
可以用来确定浏览器是否支持DOM2 级定义的CSS 能力：
12var supportsDOM2CSS = document.implementation.hasFeature(&quot;CSS&quot;,">
<meta property="og:type" content="article">
<meta property="og:title" content="《 JavaScript 高级程序设计》备忘-第十二章-2">
<meta property="og:url" content="http://codingme.xyz/2016/10/08/javascript-note-12-2/index.html">
<meta property="og:site_name" content="CodingMe">
<meta property="og:description" content="样式定义样式的方式有3 种：通过&amp;lt;link/&amp;gt;元素包含外部样式表文件、[外联]使用&amp;lt;style/&amp;gt;元素定义嵌入式样式，[内联]以及使用style 特性定义针对特定元素的样式。[行内]
可以用来确定浏览器是否支持DOM2 级定义的CSS 能力：
12var supportsDOM2CSS = document.implementation.hasFeature(&quot;CSS&quot;,">
<meta property="og:updated_time" content="2016-10-18T06:23:42.231Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="《 JavaScript 高级程序设计》备忘-第十二章-2">
<meta name="twitter:description" content="样式定义样式的方式有3 种：通过&amp;lt;link/&amp;gt;元素包含外部样式表文件、[外联]使用&amp;lt;style/&amp;gt;元素定义嵌入式样式，[内联]以及使用style 特性定义针对特定元素的样式。[行内]
可以用来确定浏览器是否支持DOM2 级定义的CSS 能力：
12var supportsDOM2CSS = document.implementation.hasFeature(&quot;CSS&quot;,">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    sidebar: {"position":"right","display":"post"},
    fancybox: true,
    motion: false,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://codingme.xyz/2016/10/08/javascript-note-12-2/"/>





  <title> 《 JavaScript 高级程序设计》备忘-第十二章-2 | CodingMe </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  










  
  
    
  

  <div class="container one-collumn sidebar-position-right page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">CodingMe</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle"></p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup">
 <span class="search-icon fa fa-search"></span>
 <input type="text" id="local-search-input">
 <div id="local-search-result"></div>
 <span class="popup-btn-close">close</span>
</div>


    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
  <link itemprop="mainEntityOfPage" href="http://codingme.xyz/2016/10/08/javascript-note-12-2/">

  <span style="display:none" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="Huang SJ">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="/uploads/avatar.jpg">
  </span>

  <span style="display:none" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="CodingMe">
    <span style="display:none" itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
      <img style="display:none;" itemprop="url image" alt="CodingMe" src="">
    </span>
  </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                《 JavaScript 高级程序设计》备忘-第十二章-2
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            

            

            
          </span>

          

          
            
          

          

          
          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="样式"><a href="#样式" class="headerlink" title="样式"></a>样式</h1><p>定义样式的方式有3 种：通过<code>&lt;link/&gt;</code>元素包含外部样式表文件、[外联]<br>使用<code>&lt;style/&gt;</code>元素定义嵌入式样式，[内联]<br>以及使用style 特性定义针对特定元素的样式。[行内]</p>
<p>可以用来确定浏览器是否支持DOM2 级定义的CSS 能力：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> supportsDOM2CSS = <span class="built_in">document</span>.implementation.hasFeature(<span class="string">"CSS"</span>, <span class="string">"2.0"</span>);</div><div class="line"><span class="keyword">var</span> supportsDOM2CSS2 = <span class="built_in">document</span>.implementation.hasFeature(<span class="string">"CSS2"</span>, <span class="string">"2.0"</span>);</div></pre></td></tr></table></figure>
<h2 id="访问元素的样式"><a href="#访问元素的样式" class="headerlink" title="访问元素的样式"></a>访问元素的样式</h2><p>任何支持style 特性的HTML 元素在JavaScript 中都有一个对应的style 属性。<br>这个style 对象是CSSStyleDeclaration 的实例，包含着通过HTML 的style 特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。<br>在style 特性中指定的任何CSS 属性都将表现为这个style 对象的相应属性。<br>对于使用短划线(分隔不同的词汇，例如background-image)的CSS 属性名，必须将其转换成驼峰大小写形式，才能通过JavaScript 来访问。</p>
<p>例如:</p>
<pre><code>background-image    style.backgroundImage
color               style.color
display             style.display
font-family         style.fontFamily
</code></pre><a id="more"></a>
<p>多数情况下，都可以简单地转换属性名的格式来实现转换。<br>但是float就不行，因为它是Javascript的保留字，因此不能用来做属性名。<br>所以css的float在对象上对应的属性名应该是cssFloat;大部分浏览器都支持。<br>而IE支持的则是styleFloat。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> myDiv = <span class="built_in">document</span>.getElementById(<span class="string">"myDiv"</span>);</div><div class="line"><span class="comment">//设置背景颜色</span></div><div class="line">myDiv.style.backgroundColor = <span class="string">"red"</span>;</div><div class="line"><span class="comment">//改变大小</span></div><div class="line">myDiv.style.width = <span class="string">"100px"</span>;</div><div class="line">myDiv.style.height = <span class="string">"200px"</span>;</div><div class="line"><span class="comment">//指定边框</span></div><div class="line">myDiv.style.border = <span class="string">"1px solid black"</span>;</div></pre></td></tr></table></figure>
<p>在实践中，最好始终都指定度量单位。否则标准模式下会因为没有度量单位而导致数值被忽略。</p>
<p>通过style 对象同样可以取得在style 特性中指定的样式。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">alert(myDiv.style.backgroundColor); <span class="comment">//"blue"</span></div><div class="line">alert(myDiv.style.width); <span class="comment">//"10px"</span></div><div class="line">alert(myDiv.style.height); <span class="comment">//"25px"</span></div></pre></td></tr></table></figure>
<p>如果没有为元素设置style 特性，那么style 对象中可能会包含一些默认的值，但这些值并不能准确地反映该元素的样式信息。</p>
<h3 id="DOM-样式属性和方法"><a href="#DOM-样式属性和方法" class="headerlink" title="DOM 样式属性和方法"></a>DOM 样式属性和方法</h3><p>提供元素的style特性值的同时，也可以修改样式的属性和方法。</p>
<ul>
<li>cssText：如前所述，通过它能够访问到style 特性中的CSS 代码。</li>
<li>length：应用给元素的CSS 属性的数量。</li>
<li>parentRule：表示CSS 信息的CSSRule 对象。</li>
<li>getPropertyCSSValue(propertyName)：返回包含给定属性值的CSSValue 对象。</li>
<li>getPropertyPriority(propertyName)：如果给定的属性使用了!important 设置，则返回”important”；否则，返回空字符串。</li>
<li>getPropertyValue(propertyName)：返回给定属性的字符串值。</li>
<li>item(index)：返回给定位置的CSS 属性的名称。</li>
<li>removeProperty(propertyName)：从样式中删除给定属性。</li>
<li>setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先权标志(“important”或者一个空字符串)。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">myDiv.style.cssText = <span class="string">"width: 25px; height: 100px; background-color: green"</span>;</div><div class="line">alert(myDiv.style.cssText);</div></pre></td></tr></table></figure>
<p>设置cssText 是为元素应用多项变化最快捷的方式，因为可以一次性地应用所有变化。<br>设计length 属性的目的，就是将其与item()方法配套使用，以便迭代在元素中定义的CSS 属性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>, len=myDiv.style.length; i &lt; len; i++)&#123;</div><div class="line">    alert(myDiv.style[i]); <span class="comment">//或者myDiv.style.item(i)</span></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>无论是使用方括号语法还是使用item()方法，都可以取得CSS 属性名(“background-color”，不是”backgroundColor”)。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> prop, value, i, len;</div><div class="line"><span class="keyword">for</span> (i=<span class="number">0</span>, len=myDiv.style.length; i &lt; len; i++)&#123;</div><div class="line">    prop = myDiv.style[i]; <span class="comment">//或者 myDiv.style.item(i)</span></div><div class="line">    value = myDiv.style.getPropertyValue(prop);</div><div class="line">    alert(prop + <span class="string">" : "</span> + value);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>getPropertyValue()方法取得的始终都是CSS 属性值的字符串表示。<br>如果用getPropertyCSSValue()方法，它返回一个包含两个属性的CSSValue 对象，这两个属性分别是：cssText 和cssValueType。其中，cssText 属性的值与getPropertyValue()返回的值相同，而cssValueType 属性则是一个数值常量，表示值的类型：0 表示继承的值，1 表示基本的值，2 表示<br>值列表，3 表示自定义的值。</p>
<p>在实际开发中，getPropertyCSSValue()使用得比getPropertyValue()少得多。IE9+、Safari3+以及Chrome 支持这个方法。Firefox 7 及之前版本也提供这个访问，但调用总返回null。</p>
<p>要从元素的样式中移除某个CSS 属性，需要使用removeProperty()方法。使用这个方法移除一个属性，意味着将会为该属性应用默认的样式(从其他样式表经层叠而来)。<br>在不确定某个给定的CSS 属性拥有什么默认值的情况下，就可以使用这个方法。只要移除相应的属性，就可以为元素应用默认值。</p>
<h3 id="计算的样式"><a href="#计算的样式" class="headerlink" title="计算的样式"></a>计算的样式</h3><p>document.defaultView，提供了getComputedStyle()方法。<br>getComputedStyle()方法返回一个CSSStyleDeclaration 对象(与style 属性的类型相同)，其中包含当前元素的所有计算的样式。<br>这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串(例如”:after”)。如果不需要伪元素信息，第二个参数可以是null。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> myDiv = <span class="built_in">document</span>.getElementById(<span class="string">"myDiv"</span>);</div><div class="line"><span class="keyword">var</span> computedStyle = <span class="built_in">document</span>.defaultView.getComputedStyle(myDiv, <span class="literal">null</span>);</div><div class="line">alert(computedStyle.backgroundColor); <span class="comment">// "red"</span></div><div class="line">alert(computedStyle.width); <span class="comment">// "100px"</span></div><div class="line">alert(computedStyle.height); <span class="comment">// "200px"</span></div><div class="line">alert(computedStyle.border); <span class="comment">// 在某些浏览器中是"1px solid black"</span></div></pre></td></tr></table></figure>
<p>边框属性可能会也可能不会返回样式表中实际的border 规则(Opera 会返回，但其他浏览器不会)。<br>存在这个差别的原因是不同浏览器解释综合(rollup)属性(如border)的方式不同，因为设置这种属性实际上会涉及很多其他属性。</p>
<p>IE 不支持getComputedStyle(),但有一个currentStyle 属性。这个属性是CSSStyleDeclaration 的实例，包含当前元素全部计算后的样式。<br>与DOM 版本的方式一样，IE 也没有返回border 样式，因为这是一个综合属性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> myDiv = <span class="built_in">document</span>.getElementById(<span class="string">"myDiv"</span>);</div><div class="line"><span class="keyword">var</span> computedStyle = myDiv.currentStyle;</div><div class="line">alert(computedStyle.backgroundColor); <span class="comment">//"red"</span></div><div class="line">alert(computedStyle.width); <span class="comment">//"100px"</span></div><div class="line">alert(computedStyle.height); <span class="comment">//"200px"</span></div><div class="line">alert(computedStyle.border); <span class="comment">//undefined</span></div></pre></td></tr></table></figure>
<p>所有计算的样式都是只读的；不能修改计算后样式对象中的CSS 属性。<br>计算后的样式也包含属于浏览器内部样式表的样式信息，因此任何具有默认值的CSS 属性都会表现在计算后的样式中。<br>不能指望某个CSS 属性的默认值在不同浏览器中是相同的。<br>如果你需要元素具有某个特定的默认值，应该手工在样式表中指定该值。</p>
<h2 id="操作样式表"><a href="#操作样式表" class="headerlink" title="操作样式表"></a>操作样式表</h2><p>CSSStyleSheet 类型表示的是样式表，包括通过<code>&lt;link&gt;</code>元素包含的样式表和在<code>&lt;style&gt;</code>元素中定义的样式表。<br>这两个元素本身分别是由HTMLLinkElement 和HTMLStyleElement 类型表示的。<br>但是，CSSStyleSheet 类型相对更加通用一些，它只表示样式表，而不管这些样式表在HTML中是如何定义的。<br>上述两个针对元素的类型允许修改HTML 特性，但CSSStyleSheet 对象则是一套只读的接口(有一个属性例外)。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//确定浏览器是否支持DOM2 级样式表。</span></div><div class="line"><span class="keyword">var</span> supportsDOM2StyleSheets =</div><div class="line"><span class="built_in">document</span>.implementation.hasFeature(<span class="string">"StyleSheets"</span>, <span class="string">"2.0"</span>);</div></pre></td></tr></table></figure>
<p>CSSStyleSheet 继承自StyleSheet，后者可以作为一个基础接口来定义非CSS 样式表。</p>
<ul>
<li>disabled：表示样式表是否被禁用的布尔值。这个属性是可读/写的，将这个值设置为true 可以禁用样式表。</li>
<li>href：如果样式表是通过<code>&lt;link&gt;</code>包含的，则是样式表的URL；否则，是null。</li>
<li>media：当前样式表支持的所有媒体类型的集合。与所有DOM 集合一样，这个集合也有一个length 属性和一个item()方法。<br>  也可以使用方括号语法取得集合中特定的项。如果集合是空列表，表示样式表适用于所有媒体。<br>  在IE 中，media 是一个反映<code>&lt;link&gt;</code>和<code>&lt;style&gt;</code>元素media特性值的字符串。</li>
<li>ownerNode：指向拥有当前样式表的节点的指针，样式表可能是在HTML 中通过<code>&lt;link&gt;</code>或<code>&lt;style/&gt;</code>引入的(在XML 中可能是通过处理指令引入的)。<br>  如果当前样式表是其他样式表通过@import 导入的，则这个属性值为null。IE 不支持这个属性。</li>
<li>parentStyleSheet：在当前样式表是通过@import 导入的情况下，这个属性是一个指向导入它的样式表的指针。</li>
<li>title：ownerNode 中title 属性的值。</li>
<li>type：表示样式表类型的字符串。对CSS 样式表而言，这个字符串是”type/css”。</li>
</ul>
<p>除了disabled 属性之外，其他属性都是只读的。<br>CSSStyleSheet 类型还支持下列属性和方法：</p>
<ul>
<li>cssRules：样式表中包含的样式规则的集合。IE 不支持这个属性，但有一个类似的rules 属性。</li>
<li>ownerRule：如果样式表是通过@import 导入的，这个属性就是一个指针，指向表示导入的规则；否则，值为null。IE 不支持这个属性。</li>
<li>deleteRule(index)：删除cssRules 集合中指定位置的规则。IE 不支持这个方法，但支持一个类似的removeRule()方法。</li>
<li>insertRule(rule,index)：向cssRules 集合中指定的位置插入rule 字符串。IE 不支持这个方法，但支持一个类似的addRule()方法。</li>
</ul>
<p>应用于文档的所有样式表是通过document.styleSheets 集合来表示的。<br>通过这个集合的length属性可以获知文档中样式表的数量，而通过方括号语法或item()方法可以访问每一个样式表。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> sheet = <span class="literal">null</span>;</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>, len=<span class="built_in">document</span>.styleSheets.length; i &lt; len; i++)&#123;</div><div class="line">    sheet = <span class="built_in">document</span>.styleSheets[i];</div><div class="line">    alert(sheet.href);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>以上代码可以输出文档中使用的每一个样式表的href 属性(<code>&lt;style&gt;</code>元素包含的样式表没有href 属性)。</p>
<p>也可以直接通过<code>&lt;link&gt;</code>或<code>&lt;style&gt;</code>元素取得CSSStyleSheet 对象。DOM 规定了一个包含CSSStyleSheet 对象的属性，名叫sheet；除了IE，其他浏览器都支持这个属性。IE 支持的是styleSheet 属性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">getStyleSheet</span>(<span class="params">element</span>)</span>&#123;</div><div class="line">    <span class="keyword">return</span> element.sheet || element.styleSheet;</div><div class="line">&#125;</div><div class="line"><span class="comment">//取得第一个&lt;link/&gt;元素引入的样式表</span></div><div class="line"><span class="keyword">var</span> link = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"link"</span>)[<span class="number">0</span>];</div><div class="line"><span class="keyword">var</span> sheet = getStylesheet(link);</div></pre></td></tr></table></figure>
<p>getStyleSheet()返回的样式表对象与document.styleSheets 集合中的样式表对象相同。</p>
<h3 id="CSS-规则"><a href="#CSS-规则" class="headerlink" title="CSS 规则"></a>CSS 规则</h3><p>CSSRule 对象表示样式表中的每一条规则。<br>CSSRule 是一个供其他多种类型继承的基类型，其中最常见的就是CSSStyleRule 类型，表示样式信息。<br>(其他规则还有@import、@font-face、@page 和@charset，但这些规则很少有必要通过脚本来访问)<br>CSSStyleRule 对象包含:</p>
<ul>
<li>cssText：返回整条规则对应的文本。由于浏览器对样式表的内部处理方式不同，返回的文本可能会与样式表中实际的文本不一样；Safari 始终都会将文本转换成全部小写。IE 不支持这个属性。</li>
<li>parentRule：如果当前规则是导入的规则，这个属性引用的就是导入规则；否则，这个值为null。IE 不支持这个属性。</li>
<li>parentStyleSheet：当前规则所属的样式表。IE 不支持这个属性。</li>
<li>selectorText：返回当前规则的选择符文本。由于浏览器对样式表的内部处理方式不同，返回的文本可能会与样式表中实际的文本不一样(例如，Safari 3 之前的版本始终会将文本转换成全部小写)。在Firefox、Safari、Chrome 和IE 中这个属性是只读的。Opera 允许修改selectorText。</li>
<li>style：一个CSSStyleDeclaration 对象，可以通过它设置和取得规则中特定的样式值。</li>
<li>type：表示规则类型的常量值。对于样式规则，这个值是1。IE 不支持这个属性。</li>
</ul>
<p>最常用的属性是cssText、selectorText 和style。<br>cssText 属性与style.cssText属性类似，但并不相同。前者包含选择符文本和围绕样式信息的花括号，后者只包含样式信息(类似于元素的style.cssText)。<br>cssText 是只读的，而style.cssText 也可以被重写。</p>
<p>大多数情况下，仅使用style 属性就可以满足所有操作样式规则的需求了。这个对象就像每个元素上的style 属性一样，可以通过它读取和修改规则中的样式信息。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">div</span><span class="selector-class">.box</span> &#123;</div><div class="line"><span class="attribute">background-color</span>: blue;</div><div class="line"><span class="attribute">width</span>: <span class="number">100px</span>;</div><div class="line"><span class="attribute">height</span>: <span class="number">200px</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> sheet = <span class="built_in">document</span>.styleSheets[<span class="number">0</span>];</div><div class="line"><span class="keyword">var</span> rules = sheet.cssRules || sheet.rules; <span class="comment">//取得规则列表</span></div><div class="line"><span class="keyword">var</span> rule = rules[<span class="number">0</span>]; <span class="comment">//取得第一条规则</span></div><div class="line">alert(rule.selectorText); <span class="comment">//"div.box"</span></div><div class="line">alert(rule.style.cssText); <span class="comment">//完整的CSS 代码</span></div><div class="line">alert(rule.style.backgroundColor); <span class="comment">//"blue"</span></div><div class="line">alert(rule.style.width); <span class="comment">//"100px"</span></div><div class="line">alert(rule.style.height); <span class="comment">//"200px"</span></div><div class="line"></div><div class="line"><span class="comment">//在这种方式下也可以修改样式信息</span></div><div class="line">rule.style.backgroundColor = <span class="string">"red"</span></div></pre></td></tr></table></figure>
<h3 id="创建规则"><a href="#创建规则" class="headerlink" title="创建规则"></a>创建规则</h3><p>DOM 规定，要向现有样式表中添加新规则，需要使用insertRule()方法。这个方法接受两个参数：规则文本和表示在哪里插入规则的索引。<br><code>sheet.insertRule(&quot;body { background-color: silver }&quot;, 0); //DOM 方法</code></p>
<p>这个例子插入的规则会改变元素的背景颜色。插入的规则将成为样式表中的第一条规则(插入到了位置0)。<br>IE8 及更早版本支持一个类似的方法，名叫addRule()，也接收两必选参数：选择符文本和CSS样式信息；一个可选参数：插入规则的位置。<br><code>sheet.addRule(&quot;body&quot;, &quot;background-color: silver&quot;, 0); //仅对IE 有效</code><br>有关这个方法的规定中说，最多可以使用addRule()添加4 095 条样式规则。超出这个上限的调用将会导致错误。</p>
<p>组装函数,这个函数接受4个参数：要向其中添加规则的样式表以及与addRule()相同的3个参数：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">insertRule</span>(<span class="params">sheet, selectorText, cssText, position</span>)</span>&#123;</div><div class="line">    <span class="keyword">if</span> (sheet.insertRule)&#123;</div><div class="line">        sheet.insertRule(selectorText + <span class="string">"&#123;"</span> + cssText + <span class="string">"&#125;"</span>, position);</div><div class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (sheet.addRule)&#123;</div><div class="line">        sheet.addRule(selectorText, cssText, position);</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">insertRule(<span class="built_in">document</span>.styleSheets[<span class="number">0</span>], <span class="string">"body"</span>, <span class="string">"background-color: silver"</span>, <span class="number">0</span>);</div></pre></td></tr></table></figure>
<p>虽然可以像这样来添加规则，但随着要添加规则的增多，这种方法就会变得非常繁琐。因此，如果要添加的规则非常多，建议还是采用动态加载样式表的技术。</p>
<h3 id="删除规则"><a href="#删除规则" class="headerlink" title="删除规则"></a>删除规则</h3><p>deleteRule()，这个方法接受一个参数：要删除的规则的位置。<br><code>sheet.deleteRule(0); //DOM 方法</code><br>IE 支持的类似方法叫removeRule()，使用方法相同。<br><code>sheet.removeRule(0); //仅对IE 有效</code></p>
<p>同样写成函数：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">deleteRule</span>(<span class="params">sheet, index</span>)</span>&#123;</div><div class="line">    <span class="keyword">if</span> (sheet.deleteRule)&#123;</div><div class="line">        sheet.deleteRule(index);</div><div class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (sheet.removeRule)&#123;</div><div class="line">        sheet.removeRule(index);</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>与添加规则相似，删除规则也不是实际Web 开发中常见的做法。</p>
<h2 id="元素大小"><a href="#元素大小" class="headerlink" title="元素大小"></a>元素大小</h2><h3 id="偏移量"><a href="#偏移量" class="headerlink" title="偏移量"></a>偏移量</h3><p>(offset dimension)，包括元素在屏幕上占用的所有可见的空间。<br>元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小(注意，不包括外边距)。</p>
<ul>
<li>offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。</li>
<li>offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。</li>
<li>offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。</li>
<li>offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。</li>
</ul>
<p>其中，offsetLeft 和offsetTop 属性与包含元素有关，包含元素的引用保存在offsetParent属性中。offsetParent 属性不一定与parentNode 的值相等。</p>
<p>要想知道某个元素在页面上的偏移量，将这个元素的offsetLeft 和offsetTop 与其offsetParent的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">getElementLeft</span>(<span class="params">element</span>)</span>&#123;</div><div class="line">    <span class="keyword">var</span> actualLeft = element.offsetLeft;</div><div class="line">    <span class="keyword">var</span> current = element.offsetParent;</div><div class="line">    <span class="keyword">while</span> (current !== <span class="literal">null</span>)&#123;</div><div class="line">        actualLeft += current.offsetLeft;</div><div class="line">        current = current.offsetParent;</div><div class="line">    &#125;</div><div class="line">    <span class="keyword">return</span> actualLeft;</div><div class="line">&#125;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">getElementTop</span>(<span class="params">element</span>)</span>&#123;</div><div class="line">    <span class="keyword">var</span> actualTop = element.offsetTop;</div><div class="line">    <span class="keyword">var</span> current = element.offsetParent;</div><div class="line">    <span class="keyword">while</span> (current !== <span class="literal">null</span>)&#123;</div><div class="line">        actualTop += current. offsetTop;</div><div class="line">        current = current.offsetParent;</div><div class="line">    &#125;</div><div class="line">    <span class="keyword">return</span> actualTop;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>对于简单的CSS 布局的页面，这两函数可以得到非常精确的结果。<br>对于使用表格和内嵌框架布局的页面，由于不同浏览器实现这些元素的方式不同，因此得到的值就不太精确了。</p>
<p>一般来说，页面中的所有元素都会被包含在几个<code>&lt;div&gt;</code>元素中，而这些<code>&lt;div&gt;</code>元素的offsetParent 又是<code>&lt;body&gt;</code>元素，所以getElementLeft()与getElementTop()会返回与offsetLeft 和offsetTop相同的值。</p>
<p>所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性；如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能。</p>
<h3 id="客户区大小"><a href="#客户区大小" class="headerlink" title="客户区大小"></a>客户区大小</h3><p>(client dimension)，指的是元素内容及其内边距所占据的空间大小。<br>属性有两个：clientWidth 和clientHeight。<br>clientWidth 属性是元素内容区宽度加上左右内边距宽度；clientHeight 属性是元素内容区高度加上上下内边距高度。<br>从字面上看，客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内。</p>
<p>要确定浏览器视口大小，可以使用document.documentElement 或document.body(在IE7 之前的版本中)的clientWidth 和clientHeight。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">getViewport</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">if</span> (<span class="built_in">document</span>.compatMode == <span class="string">"BackCompat"</span>)&#123;</div><div class="line">        <span class="keyword">return</span> &#123;</div><div class="line">            width: <span class="built_in">document</span>.body.clientWidth,</div><div class="line">            height: <span class="built_in">document</span>.body.clientHeight</div><div class="line">        &#125;;</div><div class="line">    &#125; <span class="keyword">else</span> &#123;</div><div class="line">        <span class="keyword">return</span> &#123;</div><div class="line">            width: <span class="built_in">document</span>.documentElement.clientWidth,</div><div class="line">            height: <span class="built_in">document</span>.documentElement.clientHeight</div><div class="line">        &#125;;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>首先检查document.compatMode 属性，以确定浏览器是否运行在混杂模式。<br>与偏移量相似，客户区大小也是只读的，也是每次访问都要重新计算的。</p>
<h3 id="滚动大小"><a href="#滚动大小" class="headerlink" title="滚动大小"></a>滚动大小</h3><p>滚动大小(scroll dimension)，指的是包含滚动内容的元素的大小。。<br>有些元素(例如<code>&lt;html&gt;</code>元素)，即使没有执行任何代码也能自动地添加滚动条；但另外一些元素，则需要通过CSS 的overflow 属性进行设置才能滚动。</p>
<ul>
<li>scrollHeight：在没有滚动条的情况下，元素内容的总高度。</li>
<li>scrollWidth：在没有滚动条的情况下，元素内容的总宽度。</li>
<li>scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。</li>
<li>scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。</li>
</ul>
<p>scrollWidth 和scrollHeight 主要用于确定元素内容的实际大小。<br>例如，通常认为<code>&lt;html&gt;</code>元素是在Web 浏览器的视口中滚动的元素(IE6 之前版本运行在混杂模式下时是<code>&lt;body&gt;</code>元素)。<br>因此，带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight。</p>
<p>对于不包含滚动条的页面而言， scrollWidth 和scrollHeight 与clientWidth 和clientHeight 之间的关系并不十分清晰。</p>
<ul>
<li>Firefox 中这两组属性始终都是相等的，但大小代表的是文档内容区域的实际尺寸，而非视口的尺寸。</li>
<li>Opera、Safari 3.1 及更高版本、Chrome 中的这两组属性是有差别的，其中scrollWidth 和scrollHeight 等于视口大小，而clientWidth 和clientHeight 等于文档内容区域的大小。</li>
<li>IE(在标准模式)中的这两组属性不相等，其中scrollWidth 和scrollHeight 等于文档内容区域的大小，而clientWidth 和clientHeight 等于视口大小。</li>
</ul>
<p>在确定文档的总高度时(包括基于视口的最小高度时)，必须取得scrollWidth/clientWidth 和scrollHeight/clientHeight 中的最大值，才能保证在跨浏览器的环境下得到精确的结果。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> docHeight = <span class="built_in">Math</span>.max(<span class="built_in">document</span>.documentElement.scrollHeight,</div><div class="line"><span class="built_in">document</span>.documentElement.clientHeight);</div><div class="line"><span class="keyword">var</span> docWidth = <span class="built_in">Math</span>.max(<span class="built_in">document</span>.documentElement.scrollWidth,</div><div class="line"><span class="built_in">document</span>.documentElement.clientWidth);</div></pre></td></tr></table></figure>
<p>对于运行在混杂模式下的IE，则需要用document.body 代替document.documentElement。</p>
<p>通过scrollLeft 和scrollTop 属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位置。<br>在元素尚未被滚动时，这两个属性的值都等于0。如果元素被垂直滚动了，那么scrollTop 的值会大于0，且表示元素上方不可见内容的像素高度。<br>如果元素被水平滚动了，那么scrollLeft 的值会大于0，且表示元素左侧不可见内容的像素宽度。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">scrollToTop</span>(<span class="params">element</span>)</span>&#123;</div><div class="line">    <span class="keyword">if</span> (element.scrollTop != <span class="number">0</span>)&#123;</div><div class="line">        element.scrollTop = <span class="number">0</span>;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这个函数会检测元素是否位于顶部，如果不是就将其回滚到顶部。既取得了scrollTop 的值，也设置了它的值。</p>
<h3 id="确定元素大小"><a href="#确定元素大小" class="headerlink" title="确定元素大小"></a>确定元素大小</h3><p>IE、Firefox 3+、Safari 4+、Opera 9.5 及Chrome 为每个元素都提供了一个getBoundingClientRect()方法。<br>这个方法返回会一个矩形对象，包含4 个属性：left、top、right 和bottom。<br>这些属性给出了元素在页面中相对于视口的位置。</p>
<p>浏览器的实现稍有不同。IE8 及更早版本认为文档的左上角坐标是(2, 2)，而其他浏览器包括IE9 则将传统的(0,0)作为起点坐标。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">getBoundingClientRect</span>(<span class="params">element</span>)</span>&#123;</div><div class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">arguments</span>.callee.offset != <span class="string">"number"</span>)&#123;</div><div class="line">        <span class="keyword">var</span> scrollTop = <span class="built_in">document</span>.documentElement.scrollTop;</div><div class="line">        <span class="keyword">var</span> temp = <span class="built_in">document</span>.createElement(<span class="string">"div"</span>);</div><div class="line">        temp.style.cssText = <span class="string">"position:absolute;left:0;top:0;"</span>;</div><div class="line">        <span class="built_in">document</span>.body.appendChild(temp);</div><div class="line">        <span class="built_in">arguments</span>.callee.offset = -temp.getBoundingClientRect().top - scrollTop;</div><div class="line">        <span class="built_in">document</span>.body.removeChild(temp);</div><div class="line">        temp = <span class="literal">null</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="keyword">var</span> rect = element.getBoundingClientRect();</div><div class="line">    <span class="keyword">var</span> offset = <span class="built_in">arguments</span>.callee.offset;</div><div class="line">    <span class="keyword">return</span> &#123;</div><div class="line">        left: rect.left + offset,</div><div class="line">        right: rect.right + offset,</div><div class="line">        top: rect.top + offset,</div><div class="line">        bottom: rect.bottom + offset</div><div class="line">    &#125;;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>arguments.callee.offset:检测属性是否有定义，如果没有就定义一个。<br>最终的offset 会被设置为新元素上坐标的负值，实际上就是在IE 中设置为-2，在Firefox 和Opera 中设置为-0。<br>创建一个临时的元素，将其位置设置在(0,0)，然后再调用其getBoundingClientRect()。<br>而之所以要减去视口的scrollTop，是为了防止调用这个函数时窗口被滚动了。<br>这样编写代码，就无需每次调用这个函数都执行两次getBoundingClientRect()了。<br>再在传入的元素上调用这个方法并基于新的计算公式创建一个对象。<br>对于不支持getBoundingClientRect()的浏览器，可以通过其他手段取得相同的信息。<br>一般来说，right 和left 的差值与offsetWidth 的值相等，而bottom 和top 的差值与offsetHeight相等。<br>而且，left 和top 属性大致等于使用本章前面定义的getElementLeft()和getElementTop()函数取得的值。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">getBoundingClientRect</span>(<span class="params">element</span>)</span>&#123;</div><div class="line"></div><div class="line">    <span class="keyword">var</span> scrollTop = <span class="built_in">document</span>.documentElement.scrollTop;</div><div class="line">    <span class="keyword">var</span> scrollLeft = <span class="built_in">document</span>.documentElement.scrollLeft;</div><div class="line"></div><div class="line">    <span class="keyword">if</span> (element.getBoundingClientRect)&#123;</div><div class="line"></div><div class="line">        <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">arguments</span>.callee.offset != <span class="string">"number"</span>)&#123;</div><div class="line">            <span class="keyword">var</span> temp = <span class="built_in">document</span>.createElement(<span class="string">"div"</span>);</div><div class="line">            temp.style.cssText = <span class="string">"position:absolute;left:0;top:0;"</span>;</div><div class="line">            <span class="built_in">document</span>.body.appendChild(temp);</div><div class="line">            <span class="built_in">arguments</span>.callee.offset = -temp.getBoundingClientRect().top - scrollTop;</div><div class="line">            <span class="built_in">document</span>.body.removeChild(temp);</div><div class="line">            temp = <span class="literal">null</span>;</div><div class="line">        &#125;</div><div class="line"></div><div class="line">        <span class="keyword">var</span> rect = element.getBoundingClientRect();</div><div class="line">        <span class="keyword">var</span> offset = <span class="built_in">arguments</span>.callee.offset;</div><div class="line">        <span class="keyword">return</span> &#123;</div><div class="line">            left: rect.left + offset,</div><div class="line">            right: rect.right + offset,</div><div class="line">            top: rect.top + offset,</div><div class="line">            bottom: rect.bottom + offset</div><div class="line">        &#125;;</div><div class="line">    &#125; <span class="keyword">else</span> &#123;</div><div class="line">        <span class="keyword">var</span> actualLeft = getElementLeft(element);</div><div class="line">        <span class="keyword">var</span> actualTop = getElementTop(element);</div><div class="line"></div><div class="line">        <span class="keyword">return</span> &#123;</div><div class="line">            left: actualLeft - scrollLeft,</div><div class="line">            right: actualLeft + element.offsetWidth - scrollLeft,</div><div class="line">            top: actualTop - scrollTop,</div><div class="line">            bottom: actualTop + element.offsetHeight - scrollTop</div><div class="line">        &#125;</div><div class="line"></div><div class="line">    &#125;</div><div class="line"></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这个函数在getBoundingClientRect()有效时，就使用这个原生方法，而在这个方法无效时则使用默认的计算公式。</p>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>


    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/Web/" rel="tag"># Web</a>
          
            <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2016/10/07/javascript-note-12-1/" rel="next" title="《 JavaScript 高级程序设计》备忘-第十二章-1">
                <i class="fa fa-chevron-left"></i> 《 JavaScript 高级程序设计》备忘-第十二章-1
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2016/10/09/javascript-note-12-3/" rel="prev" title="《 JavaScript 高级程序设计》备忘-第十二章-3">
                《 JavaScript 高级程序设计》备忘-第十二章-3 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/uploads/avatar.jpg"
               alt="Huang SJ" />
          <p class="site-author-name" itemprop="name">Huang SJ</p>
          <p class="site-description motion-element" itemprop="description"></p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">75</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">4</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">9</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/hsj1992" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://twitter.com/hsj9527" target="_blank" title="Twitter">
                  
                    <i class="fa fa-fw fa-twitter"></i>
                  
                  Twitter
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/u/1694147905" target="_blank" title="Weibo">
                  
                    <i class="fa fa-fw fa-weibo"></i>
                  
                  Weibo
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.freecodecamp.cn/hsj1992" target="_blank" title="FreeCodeCamp">
                  
                    <i class="fa fa-fw fa-fire"></i>
                  
                  FreeCodeCamp
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://codepen.io/hsj1992/" target="_blank" title="codepen">
                  
                    <i class="fa fa-fw fa-codepen"></i>
                  
                  codepen
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://hsj1992.oschina.io/" target="_blank" title="码云镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  码云镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://hsj1992.coding.me/" target="_blank" title="coding镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  coding镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://hsj1992.github.io/" target="_blank" title="github镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  github镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://codingme-6dd8a.firebaseapp.com" target="_blank" title="Firebase镜像">
                  
                    <i class="fa fa-fw fa-google"></i>
                  
                  Firebase镜像
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#样式"><span class="nav-number">1.</span> <span class="nav-text">样式</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#访问元素的样式"><span class="nav-number">1.1.</span> <span class="nav-text">访问元素的样式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM-样式属性和方法"><span class="nav-number">1.1.1.</span> <span class="nav-text">DOM 样式属性和方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#计算的样式"><span class="nav-number">1.1.2.</span> <span class="nav-text">计算的样式</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#操作样式表"><span class="nav-number">1.2.</span> <span class="nav-text">操作样式表</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS-规则"><span class="nav-number">1.2.1.</span> <span class="nav-text">CSS 规则</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#创建规则"><span class="nav-number">1.2.2.</span> <span class="nav-text">创建规则</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#删除规则"><span class="nav-number">1.2.3.</span> <span class="nav-text">删除规则</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#元素大小"><span class="nav-number">1.3.</span> <span class="nav-text">元素大小</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#偏移量"><span class="nav-number">1.3.1.</span> <span class="nav-text">偏移量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#客户区大小"><span class="nav-number">1.3.2.</span> <span class="nav-text">客户区大小</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#滚动大小"><span class="nav-number">1.3.3.</span> <span class="nav-text">滚动大小</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#确定元素大小"><span class="nav-number">1.3.4.</span> <span class="nav-text">确定元素大小</span></a></li></ol></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2015 - 
  <span itemprop="copyrightYear">2016</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Huang SJ</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>


        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.3/jquery.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/velocity/1.2.1/velocity.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/velocity/1.2.1/velocity.ui.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/fancybox/2.1.5/jquery.fancybox.pack.js"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.0"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>



  



  




	




  
  
  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length == 0) {
      search_path = "search.xml";
    }
    var path = "/" + search_path;
    // monitor main search box;

    function proceedsearch() {
      $("body").append('<div class="popoverlay">').css('overflow', 'hidden');
      $('.popup').toggle();
    }
    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';
      $.ajax({
        url: path,
        dataType: "xml",
        async: true,
        success: function( xmlResponse ) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = $( "entry", xmlResponse ).map(function() {
            return {
              title: $( "title", this ).text(),
              content: $("content",this).text(),
              url: $( "url" , this).text()
            };
          }).get();
          var $input = document.getElementById(search_id);
          var $resultContent = document.getElementById(content_id);
          $input.addEventListener('input', function(){
            var matchcounts = 0;
            var str='<ul class=\"search-result-list\">';
            var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
            $resultContent.innerHTML = "";
            if (this.value.trim().length > 1) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var content_index = [];
                var data_title = data.title.trim().toLowerCase();
                var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                var data_url = decodeURIComponent(data.url);
                var index_title = -1;
                var index_content = -1;
                var first_occur = -1;
                // only match artiles with not empty titles and contents
                if(data_title != '') {
                  keywords.forEach(function(keyword, i) {
                    index_title = data_title.indexOf(keyword);
                    index_content = data_content.indexOf(keyword);
                    if( index_title >= 0 || index_content >= 0 ){
                      isMatch = true;
                      if (i == 0) {
                        first_occur = index_content;
                      }
                    }

                  });
                }
                // show search results
                if (isMatch) {
                  matchcounts += 1;
                  str += "<li><a href='"+ data_url +"' class='search-result-title'>"+ data_title +"</a>";
                  var content = data.content.trim().replace(/<[^>]+>/g,"");
                  if (first_occur >= 0) {
                    // cut out 100 characters
                    var start = first_occur - 20;
                    var end = first_occur + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if(start == 0){
                      end = 50;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    var match_content = content.substring(start, end);
                    // highlight all keywords
                    keywords.forEach(function(keyword){
                      var regS = new RegExp(keyword, "gi");
                      match_content = match_content.replace(regS, "<b class=\"search-keyword\">"+keyword+"</b>");
                    });

                    str += "<p class=\"search-result\">" + match_content +"...</p>"
                  }
                  str += "</li>";
                }
              })};
            str += "</ul>";
            if (matchcounts == 0) { str = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>' }
            if (keywords == "") { str = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>' }
            $resultContent.innerHTML = str;
          });
          proceedsearch();
        }
      });}

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched == false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(function(e){
      $('.popup').hide();
      $(".popoverlay").remove();
      $('body').css('overflow', '');
    });
    $('.popup').click(function(e){
      e.stopPropagation();
    });
  </script>


  

  

  

  


</body>
</html>
